<template>
	<view class="pit-avoidance-page">
		<!-- 1. 吸顶/固定头部 -->
		<view class="sticky-header" :class="{ 'is-sticky': isTabsSticky }"
			:style="{ paddingTop: statusBarHeight + 'px' }">
			<!-- 吸顶后一直显示的 top-bar -->
			<view id="top-bar" class="top-bar">
				<view class="city-selector-sticky" @click="navigateToCitySelect">
					<u-icon name="/static/pit-avoidance/icon_dw.png" color="#000" size="18"></u-icon>
					<text class="city-selector-name">淮安市</text>
					<u-icon class="icon_down" name="/static/pit-avoidance/icon_down.png" color="#000"
						size="14"></u-icon>
				</view>
				<view class="search-bar" @click="navigateToSearch">
					<uni-icons type="mic" color="rgb(0,0,0,0.5)" size="25"></uni-icons>
					<text class="search-placeholder">美食/景点/酒店等</text>
					<view class="search-icon-sticky" @click="navigateToSearch">
						<u-icon name="search" color="#000" size="24"></u-icon>
					</view>
				</view>
			</view>
			<!-- 主Tab切换 (吸顶) -->
			<view class="sticky-main-tabs-switcher sticky-main-tabs">
				<!-- <image class="main-tabs-bg" v-if="currentMainTab === 0" src="/static/pit-avoidance/bg_bkbd.png" mode=""></image>
				<image class="main-tabs-bg" v-if="currentMainTab === 1" src="/static/pit-avoidance/bg_kyky.png" mode=""></image> -->
				<view class="main-tab-item" :class="{'active': currentMainTab === 0}" @click="handleMainTabChange(0)">

					<image class="main-tab-icon" src="/static/pit-avoidance/icon_ranking_paw.png" mode="aspectFit">
					</image>
					<view>

						<text>避坑榜单</text>
						<view class="main-tab-line">

						</view>
					</view>

					<!-- <image class="main-tab-icon deco-icon" src="/static/pit-avoidance/icon_talk_deco.png" mode="aspectFit"></image> -->
				</view>
				<view class="main-tab-item" :class="{'active': currentMainTab === 1}" @click="handleMainTabChange(1)">

					<image class="main-tab-icon bear-icon" src="/static/pit-avoidance/icon_talk_bear.png"
						mode="aspectFit"></image>
					<view>

						<text>坑言坑语</text>
						<view class="main-tab-line">

						</view>
					</view>
					<!-- <image class="main-tab-icon deco-icon" src="/static/pit-avoidance/icon_talk_deco.png" mode="aspectFit"></image> -->
				</view>
			</view>
			<view v-if="currentMainTab == 0" class="filter-bar">
				<view class="right-filters">
					<view class="filter-item">
						<text>位置距离</text>
						<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
					</view>
				</view>
				<view class="left-filters">
					<view class="filter-item priority">
						<text>避坑指数优先</text>
						<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
					</view>
				</view>
			</view>
			<!-- 次级分类Tab (吸顶) -->
			<scroll-view class="media-scroll-view" scroll-x="true" :show-scrollbar="false">
				<view class="secondary-category-tabs sticky-secondary-tabs">
					<view v-for="(tab, index) in secondaryTabList" :key="index" class="secondary-tab-item"
						:class="{ 'active': currentSecondaryTab === index }" @click="handleSecondaryTabChange(index)">
						<image :src="tab.icon" class="tab-icon" mode="aspectFit" v-if="tab.icon"></image>
						<text>{{ tab.name }}</text>
					</view>
				</view>
			</scroll-view>

		</view>

		<!-- 2. 主滚动区域 -->
		<scroll-view scroll-y class="content-scroll-view" @scroll="handleScroll" @scrolltolower="onScrollToLower">
			<!-- 顶部非固定区域 -->
			<view class="non-sticky-header">
				<image class="header-bg-image" src="/static/pit-avoidance/bg_top.png" mode="widthFix"></image>
				<view class="header-content-overlay" :style="topBarStyle">
					<view class="location-bar">
						<view class="city-selector" @click="navigateToCitySelect">
							<u-icon name="/static/pit-avoidance/icon_dw.png" color="#000" size="18"></u-icon>
							<view class="city-selector-name">淮安市</view>
							<u-icon class="icon_down" name="/static/pit-avoidance/icon_down.png" color="#000"
								size="14"></u-icon>
						</view>
						<view class="search-icon-initial" @click="navigateToSearch">
							<u-icon name="search" color="#000" size="24"></u-icon>
						</view>
					</view>
					<image class="title-image" src="/static/pit-avoidance/title_kengyankengyu.png" mode="widthFix">
					</image>

					<!-- 3D卡片轮播 -->
					<swiper class="pit-swiper" circular :current="swiperCurrent"
						@change="e => swiperCurrent = e.detail.current" previous-margin="210rpx" next-margin="210rpx">
						<swiper-item v-for="(item, index) in topSwiperList" :key="item.id">
							<view class="swiper-item-wrapper" :class="{ 'is-active': index === swiperCurrent }">
								<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
								<view class="swiper-title-overlay">{{ item.title }}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 主内容区域 -->
			<view class="main-content-container" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
				<!-- 主Tab切换 (这是吸顶效果的触发锚点) -->
				<view class="main-tabs-switcher" id="main-tabs-anchor">
					<image class="main-tabs-bg" v-if="currentMainTab === 0" src="/static/pit-avoidance/bg_bkbd.png"
						mode=""></image>
					<image class="main-tabs-bg" v-if="currentMainTab === 1" src="/static/pit-avoidance/bg_kyky.png"
						mode=""></image>
					<view class="main-tab-item" :class="{'active': currentMainTab === 0}"
						@click="handleMainTabChange(0)">

						<!-- <image class="main-tab-icon" src="/static/pit-avoidance/icon_ranking_paw.png" mode="aspectFit"></image>
						<text>避坑榜单</text>
						<image class="main-tab-icon deco-icon" src="/static/pit-avoidance/icon_talk_deco.png" mode="aspectFit"></image> -->
					</view>
					<view class="main-tab-item" :class="{'active': currentMainTab === 1}"
						@click="handleMainTabChange(1)">

						<!-- 	<image class="main-tab-icon bear-icon" src="/static/pit-avoidance/icon_talk_bear.png" mode="aspectFit"></image>
						<text>坑言坑语</text>
						<image class="main-tab-icon deco-icon" src="/static/pit-avoidance/icon_talk_deco.png" mode="aspectFit"></image> -->
					</view>
				</view>

				<!-- 切换内容区域 -->
				<view id="tab-content-wrapper" class="tab-content-wrapper"
					:class="currentMainTab === 0 ? 'bg-gradient-ranking' : 'bg-gradient-talk'">
					<!-- (1) 避坑榜单内容 -->
					<view v-show="currentMainTab === 0" class="pit-ranking-content">
						<view id="filter-bar" class="filter-bar">
							<view class="right-filters">
								<view class="filter-item">
									<text>位置距离</text>
									<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
								</view>
							</view>
							<view class="left-filters">
								<view class="filter-item priority">
									<text>避坑指数优先</text>
									<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
								</view>
							</view>
						</view>

						<scroll-view class="media-scroll-view" scroll-x="true" :show-scrollbar="false">
							<view id="bkbd-secondary-category-tabs" class="secondary-category-tabs"
								:class="{ 'is-sticky': isTabsSticky }">
								<view v-for="(tab, index) in secondaryTabList" :key="index" class="secondary-tab-item"
									:class="{ 'active': currentSecondaryTab === index }"
									@click="handleSecondaryTabChange(index)">
									<image :src="tab.icon" class="tab-icon" mode="aspectFit" v-if="tab.icon"></image>
									<text>{{ tab.name }}</text>
								</view>
							</view>
						</scroll-view>

						<view id="banner-swiper-container" class="banner-swiper-container">
							<u-swiper :list="bannerSwiperList" keyName="image" indicator indicatorMode="dot"
								indicatorActiveColor="#FBD13E" indicatorInactiveColor="rgba(255, 255, 255, 0.5)"
								:indicatorStyle="{ bottom: '20rpx',  right: '60rpx' }" height="100" radius="10"
								imgMode="aspectFill" circular @click="handleBannerSwiperClick"></u-swiper>
						</view>

						<view class="spot-list">
							<view class="spot-item" v-for="(item, index) in spotList" :key="index"
								@click="navigateToDetail(item)">
								<image class="item-bg" src="/static/pit-avoidance/item_bg.png"></image>
								<view class="item-content">
									<image class="spot-image" :src="item.image" mode="aspectFill"></image>
									<view class="spot-details">
										<text class="spot-name">{{ item.name }}</text>
										<view class="rating-line">
											<view class="rating-line-left">
												<text class="rating-label">避坑指数</text>


												<CustomRating :rating="item.rating" />

												<text class="score">{{ item.rating.toFixed(1) }}</text>
											</view>
											<text class="rating-reviews">{{ item.reviews }}条</text>
										</view>
										<view class="tags-line">
											<view>
												<text class="tag-item">{{ item.category }}</text>
												<text class="tag-item">{{ item.district }}</text>
											</view>
											<text class="distance">{{ item.distance }}</text>
										</view>
									</view>
								</view>
							</view>
							<u-loadmore :status="rankingLoadStatus" />
						</view>
					</view>

					<!-- (2) 坑言坑语内容 -->
					<view v-show="currentMainTab === 1" class="pit-talk-content">
						<scroll-view class="media-scroll-view" scroll-x="true" :show-scrollbar="false">
							<view id="kyky-secondary-category-tabs" class="secondary-category-tabs"
								:class="{ 'is-sticky': isTabsSticky }">
								<view v-for="(tab, index) in secondaryTabList" :key="index" class="secondary-tab-item"
									:class="{ 'active': currentSecondaryTab === index }"
									@click="handleSecondaryTabChange(index)">
									<image :src="tab.icon" class="tab-icon" mode="aspectFit" v-if="tab.icon"></image>
									<text>{{ tab.name }}</text>
								</view>
							</view>
						</scroll-view>

						<waterfall-posts :left-list="talkData.leftList" :right-list="talkData.rightList"
							@itemClick="navigateToPostDetail" style="margin: 0 6rpx;">
							<!-- <template #header>
								<view class="ad-swiper-container" v-if="adSwiperList.length > 0">
									<u-swiper class="custom-swiper-indicator" style="margin-bottom: 24rpx;"
										:list="adSwiperList" keyName="image" indicator indicatorMode="dot"
										indicatorActiveColor="#FFF105" indicatorInactiveColor="#FFFFFF"
										:indicatorStyle="{ bottom: '20rpx'}" height="255" radius="10"
										imgMode="heightFix" circular></u-swiper>
								</view>
							</template> -->
						</waterfall-posts>
						<u-loadmore :status="talkData.loadStatus" />
					</view>
				</view>
			</view>
		</scroll-view>

		<Tabbar :tabbar-index="1" />
		<PublishPopup :show="showPublishPopup" @close="showPublishPopup = false" />
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar/tabbar.vue";
	import PublishPopup from '@/components/PublishPopup/PublishPopup.vue';
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import CustomRating from '@/components/CustomRating/CustomRating.vue';
	import {
		getPosts
	} from '@/request/api.js';
	import config from '@/config/index.js';

	const createTalkData = () => ({
		leftList: [],
		rightList: [],
		page: 1,
		pageSize: 10,
		loadStatus: 'loadmore',
		isLoading: false,
		hasMore: true
	});

	export default {
		components: {
			Tabbar,
			PublishPopup,
			WaterfallPosts,
			CustomRating
		},
		data() {
			return {
				showPublishPopup: false,
				currentMainTab: 0,
				statusBarHeight: 0,
				navBarHeight: 0,
				isTabsSticky: false,
				stickyTriggerTop: 0,

				swiperCurrent: 1,
				topSwiperList: [],

				currentSecondaryTab: 2,
				secondaryTabList: [{
						name: '综合',
						queryType: 0
					},
					{
						name: '美食',
						icon: '/static/pit-avoidance/icon_food.png',
						queryType: 1
					},
					{
						name: '景点',
						icon: '/static/pit-avoidance/icon_jd.png',
						queryType: 2
					},
					{
						name: '交通',
						icon: '/static/pit-avoidance/icon_jt.png',
						queryType: 3
					},
					{
						name: '酒店',
						icon: '/static/pit-avoidance/icon_hotel.png',
						queryType: 4
					},
					{
						name: '体验',
						icon: '/static/pit-avoidance/icon_rw.png',
						queryType: 5
					}
				],
				bannerSwiperList: [],
				spotList: [],
				rankingLoadStatus: 'loadmore',

				talkData: createTalkData(),
				adSwiperList: [],
				touchStartX: 0,
				touchEndX: 0,
				swipeThreshold: 20, // 滑动阈值，可根据需要调整
				isPageScrolling: false, // 添加滚动状态标识
				scrollTimer: null, // 添加滚动定时器
				touchStartTime: 0, // 添加触摸开始时间
				touchEndTime: 0, // 添加触摸结束时间
			};
		},
		computed: {
			topBarStyle() {
				return `padding-top: ${this.statusBarHeight}px;`;
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.navBarHeight = systemInfo.statusBarHeight + 44; // 44是预估的顶部bar高度
			uni.$on('togglePublishPopup', this.handleTogglePublishPopup);
			this.loadInitialData();
		},
		onReady() {
			this.$nextTick(this.calculateStickyPosition);
		},
		onUnload() {
			uni.$off('togglePublishPopup', this.handleTogglePublishPopup);
		},
		onPullDownRefresh() {
			this.loadInitialData();
			setTimeout(() => uni.stopPullDownRefresh(), 1000);
		},
		// onBackPress(options) {
		// 	if (this.currentMainTab == 0) {
		// 		this.currentMainTab = 1
		// 	} else {
		// 		this.currentMainTab = 0
		// 	}
		// 	return true;
		// },

		methods: {
			handleTouchStart(event) {
				// 只有在页面没有滚动时才记录触摸开始位置
				if (!this.isPageScrolling) {
					this.touchStartX = event.touches[0].clientX;
					this.touchStartTime = new Date().getTime(); // 记录触摸开始时间
				}
			},
			handleTouchEnd(event) {
				// 只有在页面没有滚动时才处理触摸结束
				if (!this.isPageScrolling) {
					this.touchEndX = event.changedTouches[0].clientX;
					this.touchEndTime = new Date().getTime(); // 记录触摸结束时间
					this.handleSwipeGesture();
				}
			},
			handleSwipeGesture() {
				const swipeDistance = this.touchEndX - this.touchStartX;
				const swipeTime = this.touchEndTime - this.touchStartTime;
				// 检查滑动距离是否超过阈值 且 滑动时间不太长（避免误判为滚动）
				if (Math.abs(swipeDistance) > this.swipeThreshold && swipeTime < 200) {
					// 左右滑动切换tab
					if (swipeDistance > 0) {
						// 右滑 - 切换到坑言坑语
						this.currentMainTab = 1;
					} else {
						// 左滑 - 切换到避坑榜单
						this.currentMainTab = 0;
					}
				}
			},
			handleTogglePublishPopup() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				if (currentPage.route === 'pages/pit-avoidance/pit-avoidance') {
					this.showPublishPopup = !this.showPublishPopup;
				}
			},
			calculateStickyPosition() {
				const query = uni.createSelectorQuery().in(this);
				// query.select('#main-tabs-anchor').boundingClientRect(data => {
				// 	if (data) {
				// 		// 吸顶触发位置 = 元素距离顶部的高度 - (状态栏 + 导航栏内容 + 主tab + 次级tab) 的总高度
				// 		// 44 (top-bar) + 60 (main-tabs) + 50 (secondary-tabs) 是预估的吸顶后头部总高度
				// 		this.stickyTriggerTop = data.top - (this.statusBarHeight + 44 + 60 + 50); 
				// 	}
				// }).exec();

				// 避坑榜单
				query.select('#bkbd-secondary-category-tabs').boundingClientRect(data => {
					if (data) {
						// 吸顶触发位置 = 元素距离顶部的高度 - (状态栏 + 吸顶城市栏 + 元素高度(导航栏内容)) 的总高度
						this.stickyTriggerTop = data.top - (this.statusBarHeight + 44 + data.height);
						console.log("this.stickyTriggerTop", this.bkbdStickyTriggerTop);
					}
				}).exec();


			},
			handleScroll(e) {
				const scrollTop = e.detail.scrollTop;

				// 设置滚动状态
				this.isPageScrolling = true;


				// 清除之前的定时器
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer);
				}

				// 设置新的定时器，延迟一段时间后认为滚动停止
				this.scrollTimer = setTimeout(() => {
					this.isPageScrolling = false;
				}, 150); // 150ms后认为滚动停止


				if (this.stickyTriggerTop > 0 && this.currentMainTab == 0) {
					this.isTabsSticky = scrollTop >= this.stickyTriggerTop;
				} else { // 坑言坑言少一个筛选栏高度（35）
					this.isTabsSticky = scrollTop >= (this.stickyTriggerTop - 35);
				}
			},
			onScrollToLower() {
				if (this.currentMainTab === 1) {
					this.loadTalkPosts(false);
				}
			},
			loadInitialData() {
				this.topSwiperList = [{
						id: 'swp1',
						image: '/static/pit-avoidance/swp1.png',
						title: '里运河文化长廊'
					},
					{
						id: 'swp2',
						image: '/static/pit-avoidance/swp2.png',
						title: '说实话, 河下千年古镇也就那样~'
					},
					{
						id: 'swp3',
						image: '/static/pit-avoidance/swp3.png',
						title: '文庙古街道'
					}
				];
				this.adSwiperList = [{
						id: 'ad1',
						image: '/static/pit-avoidance/ad1.png'
					},
					{
						id: 'ad2',
						image: '/static/pit-avoidance/ad2.png'
					},
					{
						id: 'ad3',
						image: '/static/pit-avoidance/ad3.png'
					}
				];
				this.loadRankingData();
				this.loadTalkPosts(true);
			},
			loadRankingData() {
				this.bannerSwiperList = [{
						image: '/static/pit-avoidance/banner_aquarium.png',
						title: '本地熊榜单-淮安站'
					},
					{
						image: '/static/pit-avoidance/banner_aquarium.png',
						title: '探索更多精彩'
					}
				];
				this.spotList = [{
						id: 1,
						name: '淮安市河下古镇',
						image: '/static/pit-avoidance/spot_hexia.png',
						rating: 4.5,
						reviews: 8412,
						category: '5A级景点/古镇',
						district: '淮安区',
						distance: '5.3km'
					},
					{
						id: 2,
						name: '淮安市西游乐园',
						image: '/static/pit-avoidance/spot_xiyou.png',
						rating: 4.0,
						reviews: 5615,
						category: '主题乐园',
						district: '清江浦区',
						distance: '6.8km'
					},
					{
						id: 3,
						name: '淮安市动物园',
						image: '/static/pit-avoidance/spot_zoo.png',
						rating: 3.5,
						reviews: 3691,
						category: '动物园',
						district: '清江浦区',
						distance: '9.8km'
					},
					{
						id: 4,
						name: '总督漕运部院遗址公园',
						image: '/static/pit-avoidance/spot_caoyun.png',
						rating: 3.0,
						reviews: 1527,
						category: '纪念公园',
						district: '淮安区',
						distance: '13.5km'
					},
					{
						id: 5,
						name: '古黄河湿地公园',
						image: '/static/pit-avoidance/spot_guhuanghe.png',
						rating: 3.6,
						reviews: 1527,
						category: '湿地公园',
						district: '清江浦区',
						distance: '4.5km'
					},
					{
						id: 6,
						name: '淮安市河下古镇',
						image: '/static/pit-avoidance/spot_hexia.png',
						rating: 4.5,
						reviews: 8412,
						category: '5A级景点/古镇',
						district: '淮安区',
						distance: '5.3km'
					},
					{
						id: 7,
						name: '淮安市西游乐园',
						image: '/static/pit-avoidance/spot_xiyou.png',
						rating: 4.0,
						reviews: 5615,
						category: '主题乐园',
						district: '清江浦区',
						distance: '6.8km'
					},
					{
						id: 8,
						name: '淮安市动物园',
						image: '/static/pit-avoidance/spot_zoo.png',
						rating: 3.5,
						reviews: 3691,
						category: '动物园',
						district: '清江浦区',
						distance: '9.8km'
					},
					{
						id: 9,
						name: '总督漕运部院遗址公园',
						image: '/static/pit-avoidance/spot_caoyun.png',
						rating: 3.0,
						reviews: 1527,
						category: '纪念公园',
						district: '淮安区',
						distance: '13.5km'
					},
					{
						id: 10,
						name: '古黄河湿地公园',
						image: '/static/pit-avoidance/spot_guhuanghe.png',
						rating: 3.6,
						reviews: 1527,
						category: '湿地公园',
						district: '清江浦区',
						distance: '4.5km'
					}
				];
				this.rankingLoadStatus = 'nomore';
			},
			async loadTalkPosts(isRefresh = false) {
				const data = this.talkData;
				if (data.isLoading || (!isRefresh && !data.hasMore)) return;
				data.isLoading = true;
				data.loadStatus = 'loading';
				if (isRefresh) {
					data.page = 1;
					data.leftList = [];
					data.rightList = [];
					data.hasMore = true;
				}
				const params = {
					userId: this.$store.state.userInfo?.userId,
					queryType: 3,
					pageNum: data.page,
					pageSize: data.pageSize
				};
				try {
					const res = await getPosts(params);
					if (res.data?.code === 200) {
						const formattedPosts = (res.data.rows || []).map(this.formatApiData);
						this.distributePostsToColumns(formattedPosts);
						data.hasMore = formattedPosts.length === data.pageSize;
						if (data.hasMore) data.page++;
					}
				} catch (error) {
					console.error(`请求坑言坑语失败:`, error);
				} finally {
					data.loadStatus = data.hasMore ? 'loadmore' : 'nomore';
					data.isLoading = false;
				}
			},
			distributePostsToColumns(newPosts) {
				newPosts.forEach(post => {
					(this.talkData.leftList.length <= this.talkData.rightList.length ? this.talkData.leftList :
						this.talkData.rightList).push(post);
				});
			},
			formatApiData(item) {
				const coverImage = (item.files && item.files.length > 0) ? (item.files[0].fileUrl.startsWith('http') ? item
					.files[0].fileUrl : config.cdnURL + item.files[0].fileUrl) : '';
				const authorAvatar = item.avatar ? (item.avatar.startsWith('http') ? item.avatar : config.cdnURL + item
					.avatar) : '/static/demo/avatar_default.png';
				return {
					id: item.id,
					image: coverImage,
					content: item.content,
					author: {
						avatar: authorAvatar,
						name: item.nickName || '匿名用户'
					},
					isLiked: item.isLiked,
					likeCount: item.likeCount,
					...item
				};
			},
			handleMainTabChange(index) {
				if (this.currentMainTab === index) return;
				this.currentMainTab = index;
			},
			handleSecondaryTabChange(index) {
				if (this.currentSecondaryTab === index) return;
				this.currentSecondaryTab = index;
				if (this.currentMainTab === 1) {
					this.loadTalkPosts(true);
				}
			},
			handleBannerSwiperClick(index) {
				uni.showToast({
					title: this.bannerSwiperList[index].title,
					icon: 'none'
				});
			},
			navigateToDetail(item) {
				uni.navigateTo({
					url: `/pages_sub/pit-avoidance/attraction-detail/attraction-detail?item=${encodeURIComponent(JSON.stringify(item))}`
				});
			},
			navigateToPostDetail(item) {
				uni.navigateTo({
					url: `/pages_sub/index/rich-post-detail/rich-post-detail`,
					success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
						item: item
					})
				});
			},
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			navigateToSearch() {
				uni.navigateTo({
					url: '/pages_sub/common/search-suggestions/search-suggestions'
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	/* 页面基础 */
	.pit-avoidance-page {
		background-color: #F8F8F8;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 吸顶头部 */
	.sticky-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background-color: transparent;
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease;

		&.is-sticky {
			visibility: visible;
			opacity: 1;
			// background-color: #FDF6EC; 
			backdrop-filter: blur(10px);
			// box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); 
			background: linear-gradient(to bottom, #FFDF84, #FFFFFF);
		}

		.top-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			height: 44px;
			box-sizing: border-box;

			.city-selector-sticky {
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: flex-end;

				text {
					margin-right: 8rpx;
				}
			}

			.city-selector-name {
				margin: 0 10rpx;
			}

			.icon_down {
				padding-bottom: 5rpx;
			}

			.search-bar {
				position: relative;
				background-color: rgba(255, 255, 255);
				border: 1rpx solid rgba(255, 255, 255, 0.2);
				margin-left: 20rpx;
				flex-grow: 1;
				display: flex;
				align-items: center;
				height: 64rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
			}

			.search-placeholder {
				color: rgba(0, 0, 0, 0.5);
				margin-left: 10rpx;
				font-size: 28rpx;
			}

			.search-icon-sticky {
				position: absolute;
				right: 20rpx;
			}
		}

		.sticky-main-tabs-switcher {
			display: flex;
			margin: 10rpx 0 30rpx 0;
			align-items: flex-end;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;
			gap: 20rpx;

			.main-tab-item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				font-size: 32rpx;
				color: #000;
				transition: all 0.3s ease-in-out;
				position: relative;



				.main-tab-icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 8rpx;
				}

				.bear-icon {
					width: 60rpx;
					height: 60rpx;
				}

				.deco-icon {
					width: 60rpx;
					height: 60rpx;
					margin-left: 4rpx;
				}

				&.active {
					// height: 90rpx;
					// background-color: #fff;
					font-weight: bold;
					align-items: flex-end;
					color: #333;
					font-size: 36rpx;

					// transform: scale(1.2);
					// border-radius: 20rpx 20rpx 0 0;
					.main-tab-icon {
						width: 70rpx;
						height: 70rpx;
						margin-right: 8rpx;
					}

					.bear-icon {
						width: 70rpx;
						height: 70rpx;
					}

					.main-tab-line {
						// width: 100rpx;
						height: 10rpx;
						border-radius: 8rpx;
						background: linear-gradient(to right, #FF8E15, #FFCB37, rgba(255, 255, 255, 0));
						;
					}
				}
			}
		}

		.sticky-main-tabs {
			padding: 0 30rpx;
			display: flex;
			justify-content: flex-start;
		}

		.sticky-secondary-tabs {
			border-radius: 0 0 0 0;
		}
	}

	/* 主滚动区 */
	.content-scroll-view {
		flex: 1;
		height: 100%;
	}

	/* 顶部非固定区域 */
	.non-sticky-header {
		position: relative;

		.header-bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.header-content-overlay {
			position: relative;
			z-index: 2;
			padding: 20rpx 0;
		}

		.title-image {
			width: 85%;
			height: 100rpx;
			margin: 30rpx auto 10rpx;
			display: block;
		}

		.location-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.city-selector {
				display: flex;
				align-items: flex-end;
				font-size: 30rpx;
				font-weight: bold;
			}

			.city-selector-name {
				margin: 0 10rpx;
			}

			.icon_down {
				padding-bottom: 5rpx;
			}
		}

	}

	/* 3D卡片轮播 */
	.pit-swiper {
		height: 170rpx;
		margin-top: 30rpx;

		.swiper-item-wrapper {
			height: 100%;
			transition: transform 0.3s, opacity 0.3s;
			transform: scale(0.8);
			opacity: 0.8;
			position: relative;
			border-radius: 12rpx;
			overflow: hidden;

			&.is-active {
				transform: scale(1);
				opacity: 1;
			}

			.swiper-image {
				width: 100%;
				height: 100%;
			}

			.swiper-title-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 10rpx 12rpx;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
				color: #fff;
				font-size: 24rpx;
				white-space: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	/* 主内容容器 */
	.main-content-container {
		position: relative;
		z-index: 2;
		margin-top: 0rpx;

	}

	/* 主Tab切换 */
	.main-tabs-switcher {
		display: flex;
		// padding: 0 30rpx;
		height: 160rpx;
		align-items: flex-end;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;

		.main-tabs-bg {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}

		.main-tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			font-size: 28rpx;
			color: #000;
			transition: all 0.3s ease-in-out;
			position: relative;

			&:first-child {
				border-radius: 40rpx 0 0 0;
			}

			&:last-child {
				border-radius: 0 40rpx 0 0;
			}

			.main-tab-icon {
				width: 60rpx;
				height: 60rpx;
				margin-right: 8rpx;
			}

			.bear-icon {
				width: 60rpx;
				height: 60rpx;
			}

			.deco-icon {
				width: 20rpx;
				height: 20rpx;
				margin-left: 4rpx;
			}

			&.active {
				// height: 90rpx;
				// background-color: #fff;
				font-weight: bold;
				color: #333;
				transform: scale(1.2);
				// border-radius: 20rpx 20rpx 0 0;
			}
		}
	}

	/* 内容包裹器 */
	.tab-content-wrapper {
		min-height: 50vh;
		padding-bottom: calc(102rpx + 30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(102rpx + 30rpx + env(safe-area-inset-bottom));

		&.bg-gradient-ranking {
			background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
		}

		&.bg-gradient-talk {
			background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
		}
	}

	/* 水平滚动容器 */
	.media-scroll-view {
		width: 100%;
		white-space: nowrap; // 核心：让子元素不换行，从而可以水平滚动

		// border-radius: 20rpx 20rpx 0 0; 
		/* 隐藏滚动条 */
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}
	}

	/* 次级分类Tab (通用) */
	.secondary-category-tabs {
		display: flex;
		padding: 0 26rpx 0rpx;
		width: 100%;
		height: 70rpx;
		opacity: 1;

		&.is-sticky {
			visibility: visible;
			opacity: 0;
			background-color: #FDF6EC;
			backdrop-filter: blur(10px);
			// box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); 
			// background: linear-gradient(to bottom, #FFDE81 , #F8E8BB);
		}

		.secondary-tab-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-right: 12rpx;
			padding: 6rpx 14rpx 6rpx 12rpx;
			border-radius: 36rpx;
			background-color: #FFFFFF;
			border: 1rpx solid #BCBCBB;
			margin-bottom: 20rpx;

			.tab-icon {
				width: 38rpx;
				height: 38rpx;
				margin-right: 6rpx;
			}

			text {
				font-size: 28rpx;
				color: #5C2D04;
			}

			&.active {
				background-color: #5C2D04;
				border-color: #fff;

				text {
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}

	.filter-bar {
		display: flex;
		align-items: center;
		padding: 0rpx 26rpx 30rpx;

		.filter-item {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #000;

			&.priority {
				color: #000;
				margin-left: 40rpx;
			}

			text {
				margin-right: 4rpx;
			}

			.u-icon {
				padding-top: 8rpx;
			}
		}
	}

	/* 避坑榜单 */
	.pit-ranking-content {

		.banner-swiper-container {
			margin: 10rpx 26rpx 30rpx;
		}

		.spot-list {
			display: flex;
			flex-direction: column;
			gap: 30rpx;
			margin: 0 26rpx;

			.spot-item {
				position: relative;
				width: 100%;
				height: 170rpx;
				border-radius: 16rpx;
				overflow: hidden;
				background-size: 100% 100%;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

				.item-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				.item-content {
					position: relative;
					z-index: 2;
					display: flex;
					align-items: center;
					height: 100%;
					box-sizing: border-box;

					.spot-image {
						width: 210rpx;
						height: 100%;
						border-radius: 20rpx;
						flex-shrink: 0;
					}

					.spot-details {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						flex: 1;
						height: 100%;
						margin-left: 30rpx;
						color: #333;
						margin-right: 20rpx;

						.spot-name {
							font-size: 32rpx;
							font-weight: bold;
						}

						.rating-line {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.rating-line-left {
								display: flex;
								align-items: center;
							}

							.rating-label {
								font-size: 26rpx;
								color: #666;
								margin-right: 10rpx;
							}

							.score {
								font-size: 28rpx;
								color: #F66B2F;
								margin: 0 10rpx;
							}

							.rating-reviews {
								font-size: 24rpx;
								color: #666;
							}
						}

						.tags-line {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.tag-item {
								color: #666;
								font-size: 22rpx;
								margin-right: 20rpx;
							}
						}

						.distance {
							font-size: 24rpx;
							color: #000;
							align-self: flex-end;
						}
					}
				}
			}
		}
	}

	/* 坑言坑语 */
	.pit-talk-content {
		.ad-swiper-container {
			.custom-swiper-indicator ::v-deep .u-swiper-indicator__wrapper__dot {
				width: 7px;
				height: 7px;
			}

			.custom-swiper-indicator ::v-deep .u-swiper-indicator__wrapper__dot--active {
				width: 15px;
			}
		}
	}
</style>